<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>

  <body>
    <div class="yeye">
      爷爷
      <div class="father">
        father
        <div class="son">儿子</div>
      </div>
    </div>

    <div class="nav">
      <p>外层P标签</p>
      <div>
        <p>内存P标签</p>
      </div>
    </div>
    <ol>
      <li id="love">因为爱情</li>
      <li id="eason">浮夸</li>
      <li>好久不见</li>
      <li>富士山下</li>
    </ol>
    <script>
      /* 
            层级选择器

            语法                        用法                             说明
            parent()                $('li').parent();               查找父级元素
            children(selector)      $('ul').children('li')          相当于 $('ul>li'),最近一级(亲儿子)
            find(selector)          $('ul').find('li')              相当于 $('ul li'),后代选择器
            siblings(selector)      $(.first).siblings('li')        查找兄弟节点，不包含自身
            nextAll([expr])         $('.first').nextAll()           查找当前元素之后的所有元素 
            preAll([expr])          $('.first').prevAll()           查找当前元素之前的所有元素
            hasClass(class)         $('div').hasClass('current')    判断当前元素中是否某个类，返回布尔值
            eq(index)               $('li').eq(2)                   相当于 $('li:eq(2)')
        */
      // 注意都是方法，带括号
      // console.log($(".son").parent());
      // console.log($(".nav").children("p"));
      // console.log($(".nav").find("p"));
      // console.log($("#eason").siblings());
      console.log($("#eason").siblings("#love"));
      // console.log($('#eason').nextAll());
    </script>
  </body>
</html>